<template lang="pug">
  v-container
    OrderLendOut(ref="lendout")
    OrderReturn(ref="return")
    v-card
      v-toolbar(color="purple darken-4" dark dense)
        v-toolbar-title 基本信息
        v-spacer
        v-toolbar-items
          v-btn(text :href="pdfDownloadUrl" @click="preventDoubleClick" download) PDF
          v-btn(text @click="confirm") 订单出库
          v-btn(text @click="revert") 订单入库
          v-btn(text @click="complete") 订单完成
          v-btn(text @click="cancel") 订单取消
          v-btn(text @click="gotoEdit") 编辑
      v-form(ref="form")
        v-container
          v-row
            v-col(cols="4")
              h4.body-2 {{ Lang['order_number'] }}
              p.body-1.text--primary {{ val('order_number') }}
            v-col(cols="4")
              h4.body-2 {{ Lang['status_id'] }}
              p.body-1.text--primary {{ val('status.label') }}
            v-col(cols="12")
              h4.body-2 {{ Lang['customer'] }}
              p.body-1.text--primary {{ val('customer.name') }}
            v-col(cols="4")
              h4.body-2 {{ Lang['assigned_to'] }}
              p.body-1.text--primary {{ val('assigned_to.name') }}
            v-col(cols="4")
              h4.body-2 {{ Lang['created_by'] }}
              p.body-1.text--primary {{ val('created_by.name') }}
            v-col(cols="4")
              h4.body-2 {{ Lang['created_at'] }}
              p.body-1.text--primary {{ val('created_at') }}
            v-col(cols="4")
              h4.body-2 {{ Lang['expected_rental_out_date'] }}
              p.body-1.text--primary {{ val('expected_rental_out_date') }}
            v-col(cols="8")
              h4.body-2 {{ Lang['expected_return_date'] }}
              p.body-1.text--primary {{ val('expected_return_date') }}
            v-col(cols="4")
              h4.body-2 {{ Lang['real_rental_out_date'] }}
              p.body-1.text--primary {{ val('real_rental_out_date') }}
            v-col(cols="8")
              h4.body-2 {{ Lang['real_return_date'] }}
              p.body-1.text--primary {{ val('real_return_date') }}
            v-col(cols="12")
              h4.body-2 {{ Lang['payment_method_id'] }}
              p.body-1.text--primary {{ val('payment_method.label') }}
            v-col(cols="4")
              h4.body-2 {{ Lang['is_paid'] }}
              p.body-1.text--primary {{ order.is_paid ? '是' : '否' }}
            v-col(cols="8")
              h4.body-2 {{ Lang['paid_at'] }}
              p.body-1.text--primary {{ val('paid_at') }}
            v-col(cols="12")
              h4.body-2 {{ Lang['discount'] }}
              p.body-1.text--primary {{ val('discount') }}
            v-col(cols="4")
              h4.body-2 {{ Lang['net_amount'] }}
              p.body-1.text--primary {{ val('net_amount') }}



    v-card.mt-4
      v-toolbar(color="purple darken-4" dark dense)
        v-toolbar-title 物流信息
      v-form(ref="form")
        v-container
          v-row
            v-col(cols="12")
              h4.body-2 {{ Lang['identification_number'] }}
              p.body-1.text--primary {{ val('identification_number') }}
            v-col(cols="12")
              h4.body-2 {{ Lang['ship_address'] }}
              p.body-1.text--primary {{ val('ship_address') }}
            v-col(cols="4")
              h4.body-2 {{ Lang['expected_ship_date'] }}
              p.body-1.text--primary {{ val('expected_ship_date') }}
            v-col(cols="4")
              h4.body-2 {{ Lang['real_ship_date'] }}
              p.body-1.text--primary {{ val('real_ship_date') }}
    v-card.mt-4
      v-toolbar(color="purple darken-4" dark dense)
        v-toolbar-title 清单
        v-spacer
        v-label(dark) 总价: {{order.net_amount}}
      v-card-text
        v-card-title 资产
        v-divider
        v-data-table(
          :headers="OrderItemDataTableDef.headers"
          :items="OrderItemsDataSource"
          item-key="name"
          disable-pagination=true
          hide-default-footer=true
          disable-sort=true)
        template(v-slot:item.netPrice="{item}")
          span {{ getPrice(item) }}
      v-card-text
        v-card-title 资产组合
        v-divider
        BundleView

    AttachmentSection.mt-4(ref="attachments", :id="order.id" :type="attachableType")
</template>

<script lang="ts">
  import Vue, {VueConstructor} from 'vue'
  import {OrderLang as Lang, OrderItemDataTableDef} from '@/store/modules/types/Order'
  import OrderLendOut from './order_lend_out.vue'
  import OrderReturn from './order_return.vue'
  import {mapActions, mapGetters, mapMutations, mapState} from 'vuex'
  import {get} from 'lodash'
  import {AxiosResponse} from 'axios'
  import {AttachableType} from '@/store/modules/types/Attachment'
  import AttachmentSection from '@/components/shared/AttachmentSectionInDetailsView.vue'
  import BundleView from './order_bundles_view'
  import {url} from '@/store/utils'

  export default (Vue as VueConstructor<Vue & {
    $refs: {
      lendout: OrderLendOut
      return: OrderReturn
    }
  }>).extend({
    name: 'order_view',
    computed: {
      ...mapState('order', ['order', 'orderItems']),
      ...mapGetters('order', ['OrderItemsDataSource']),
      pdfDownloadUrl(){

        return url(`/order/print/pdf/${this.order.id}`)
      },
    },
    components: { OrderLendOut, OrderReturn, AttachmentSection, BundleView },
    methods: {
      ...mapMutations('order', ['resetClone', 'setActive']),
      ...mapActions('order', ['cancelOrder', 'revertOrder', 'completeOrder']),
      preventDoubleClick(){
        this.$loading("请不要重复点击，PDF生产以后会自动弹出下载框");
        setTimeout(()=>{this.$loading.close()}, 3000)
      },
      revert() {
        this.$refs.return.toggle()
      },
      confirm() {
        this.$refs.lendout.toggle()
      },
      complete() {
        this.$confirm({
          body: '是否确定关闭订单？'
        }).then(() => {
          this.$loading('保存中...')
          return this.completeOrder()
        }).then((response: AxiosResponse) => {
          this.setActive(response.data.order)
        }).finally(this.$loading.close)
      },
      cancel() {
        this.$confirm({
          body: '是否确定取消订单？'
        }).then(() => {
          this.$loading('保存中...')
          return this.cancelOrder()
        }).then((response: AxiosResponse) => {
          this.setActive(response.data.order)
        }).finally(this.$loading.close)
      },
      gotoEdit() {
        this.resetClone()
        this.$emit('toggleModel', 'edit')
      },
      val(path: string) {
        let _v = get(this.order, path, 'N/A')
        return _v || 'N/A'
      }
    },
    data() {
      return {
        attachableType: AttachableType.Order,
        Lang,
        OrderItemDataTableDef
      }
    }
  })
</script>